/* import { useContext,createContext} from 'react' */
/* const Context = createContext();     */   //创建上下文对象
/* const Context = createContext()
function Bar(props){
    const arr = useContext(Context)
    return(
        <div>
            <h1>Foo{props.a}</h1>
            <h3>Bar</h3>
            <h1>{arr}</h1>
        </div>
    )
}


function Foo(props){
    return(
        <div>
            <h1>{props.a}</h1>
            <h2>foo</h2>
            <Bar a={props.a}></Bar>
        </div>
    ) 
}

function App(){
    const a = "来自父组件的数据"
    return(
        <Context.Provider value={'来自 app 的数据'}>
            <div>
            <h1>App</h1>
            <Foo a={a}></Foo>
         </div>
        </Context.Provider>
        
    )
}
export default App; */
 import { useContext,createContext} from 'react' 
 const Context = createContext();   
function Bar(){
    const a = useContext(Context)
    return(
        <div>
            <h3>Bar</h3>
            <h1>{a}</h1>
        </div>
    )
}

function Foo(){
    return(
        <div>
            <h2>foo</h2>
            <Bar></Bar>
        </div>
    ) 
}

function App(){
     const a = "来自父组件的数据"
    return(
        <Context.Provider value={a}>
        <div>
            <h1>App</h1>
            <Foo></Foo>
        </div>
        </Context.Provider>
    )
}
export default App;